<template>
  <div class="label-manager">
    <h3>标签</h3>
    <div class="labels-list">
      <div 
        v-for="label in availableLabels" 
        :key="label.id"
        class="label-item"
        :class="{ selected: isSelected(label) }"
        @click="toggleLabel(label)"
      >
        <div 
          class="label-color"
          :style="{ backgroundColor: label.color }"
        />
        <span class="label-name">{{ label.name }}</span>
        <button 
          v-if="isAdmin"
          class="edit-btn"
          @click.stop="editLabel(label)"
        >
          编辑
        </button>
      </div>
    </div>

    <button 
      v-if="isAdmin"
      class="add-label"
      @click="showCreateLabel"
    >
      + 创建新标签
    </button>

    <Modal v-if="editingLabel" v-model="showEditModal">
      <template #header>
        <h3>{{ isCreating ? '创建标签' : '编辑标签' }}</h3>
      </template>
      
      <div class="label-form">
        <input 
          v-model="editingLabel.name"
          placeholder="标签名称"
        />
        <div class="color-picker">
          <div
            v-for="color in colors"
            :key="color"
            class="color-option"
            :style="{ backgroundColor: color }"
            :class="{ selected: editingLabel.color === color }"
            @click="editingLabel.color = color"
          />
        </div>
        <div class="form-actions">
          <button @click="saveLabel">保存</button>
          <button 
            v-if="!isCreating"
            class="delete"
            @click="deleteLabel"
          >
            删除
          </button>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useBoardStore } from '../../stores/board';
import Modal from '../Common/Modal.vue';

const props = defineProps({
  selectedLabels: {
    type: Array,
    required: true
  }
});

const emit = defineEmits(['update:selectedLabels']);

const boardStore = useBoardStore();
const availableLabels = computed(() => boardStore.currentBoard.labels);
const isAdmin = computed(() => boardStore.isAdmin);

const editingLabel = ref(null);
const showEditModal = ref(false);
const isCreating = computed(() => !editingLabel.value?.id);

const colors = [
  '#61BD4F', '#F2D600', '#FF9F1A', '#EB5A46',
  '#C377E0', '#0079BF', '#00C2E0', '#51E898'
];

const isSelected = (label) => {
  return props.selectedLabels.includes(label.id);
};

const toggleLabel = (label) => {
  const selected = [...props.selectedLabels];
  const index = selected.indexOf(label.id);
  
  if (index > -1) {
    selected.splice(index, 1);
  } else {
    selected.push(label.id);
  }
  
  emit('update:selectedLabels', selected);
};

const showCreateLabel = () => {
  editingLabel.value = {
    name: '',
    color: colors[0]
  };
  showEditModal.value = true;
};

const editLabel = (label) => {
  editingLabel.value = { ...label };
  showEditModal.value = true;
};

const saveLabel = async () => {
  if (isCreating.value) {
    await boardStore.createLabel(editingLabel.value);
  } else {
    await boardStore.updateLabel(editingLabel.value);
  }
  showEditModal.value = false;
  editingLabel.value = null;
};

const deleteLabel = async () => {
  await boardStore.deleteLabel(editingLabel.value.id);
  showEditModal.value = false;
  editingLabel.value = null;
};
</script>

<style scoped>
.label-manager {
  margin-top: 16px;
}

.labels-list {
  margin-top: 8px;
}

.label-item {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 3px;
  cursor: pointer;
}

.label-item:hover {
  background-color: #F4F5F7;
}

.label-item.selected {
  background-color: #E4F0F6;
}

.label-color {
  width: 32px;
  height: 16px;
  border-radius: 3px;
}

.label-name {
  margin-left: 8px;
  flex: 1;
}

.color-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 16px 0;
}

.color-option {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
}

.color-option.selected {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #0079BF;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

.delete {
  color: #EB5A46;
}
</style> 